<template>
  <div class="con">
      <el-tabs v-model="activeName" type="card" tab-position="top" stretch @tab-click="handleClick">
        <el-tab-pane label="东巴经" name="first">
            <img src="@/assets/tabs/1.jpg" alt="">
        </el-tab-pane>
        <el-tab-pane label="东巴壁画" name="second">
            <img src="@/assets/tabs/2.jpg" alt="" srcset="">
        </el-tab-pane>
        <el-tab-pane label="东巴木雕" name="third">
            <img src="@/assets/tabs/3.jpg" alt="" srcset="">
        </el-tab-pane>
        <el-tab-pane label="东巴纸坊" name="fourth">
            <img src="@/assets/tabs/4.jpg" alt="" srcset="">
        </el-tab-pane>
        <el-tab-pane label="东巴舞蹈" name="five">
            <img src="@/assets/tabs/5.png" alt="" srcset="">
        </el-tab-pane>
        <el-tab-pane label="东巴木偶" name="six">
            <img src="@/assets/tabs/6.jpg" alt="" srcset="">
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first',
          nameList: ['first', 'second', 'third', 'fourth', 'five', 'six'],
        index:0
      };
    },
    mounted() {
        setInterval(() => {
            this.index++
            if (this.index == this.nameList.length) {
                this.index = 0;
            }
            this.activeName = this.nameList[this.index]
        }, 2000);
  },
  methods: {
      handleClick(tab) {
        this.index=tab.index-1
      }
    }
  };
</script>
<style lang="scss" scoped>
el-tabs{
    text-align: center;
}
img{
    width: 1100px;
    height: 400px;
}
</style>